<template>
    <div>
        <ul>
            <li class = "sort" v-for="(item,index) in sortList" :key="index" @click = "goSort(index)">
                <div class="sort_icon">
                    <van-icon :name="item.icon" :color="item.color"></van-icon>
                </div>

                <div :class = "active == index?'sort_title active':'sort_title'">
                    <span>
                        {{item.name}}
                    </span>

                    <span v-show="active==index">
                        <van-icon name="success" color="#3190e8" size="20px" />
                    </span>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
export default{
    data() {
        return {
            sortList:[
                {
                    id:1,
                    name:"起送价最低",
                    icon:"gold-coin-o",
                    color:"#E6B61A"
                },{
                    id:2,
                    name:"配送速度",
                    icon:'clock-o',
                    color:"#37C7B7"
                },{
                    id:3,
                    name:"评分",
                    icon:"star-o",
                    color:"#E6B61A"
                }
                ,{
                    id:4,
                    name:"智能排序",
                    icon:"sort",
                    color:"#3190e8"
                }
                ,{
                    id:5,
                    name:"距离最近",
                    icon:"location-o",
                    color:"#5FB4DE"
                }
                ,{
                    id:6,
                    name:"销量最高",
                    icon:"fire-o",
                    color:"red"
                }
                
            ],
            active:-1
        }
    },
    methods:{
        goSort(index){
            this.active = index;
            // 获取排序id
            let id = this.sortList[index].id;
            // 子组件向父组件发送id,父组件接收到id后重新排序
            this.$emit("sendId",id)
        }
    }
}

</script>


<style lang="less" scoped>

.sort {
    display: flex;
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    color: #666;
    .sort_icon{
        width: 15%;
        text-align: center;
        font-size: 17px;
    }
    .sort_title{
        width: 85%;
        border-bottom: 1px solid #e4e4e4;
        display: flex;
        justify-content: space-between;
        padding-right: 10px;
        
    }
    .active{
            color: #3190e8;
        }
}
</style>